<template>
  <div class="search-detail">
	<div>
		<span class="font-color keywords">{{keywords}}</span>
		共找到<span class="count font-color">{{count}}</span>
		个<span class="count font-color">{{searchType}}</span>
	</div>
	  <el-tabs v-model="activeName" @tab-click="handleClick">
	    <el-tab-pane label="单曲" name="first">
			<search-songs :key="timer1" @setData="setDataHandle"></search-songs>
		</el-tab-pane>
	    <el-tab-pane label="歌手" name="second">
			<search-artist :key="timer2" @setData="setDataHandle"></search-artist>
		</el-tab-pane>
	    <el-tab-pane label="歌单" name="third">
			<search-playlist :key="timer3" @setData="setDataHandle"></search-playlist>
		</el-tab-pane>
	    <el-tab-pane label="专辑" name="fourth">
			<search-album :key="timer4" @setData="setDataHandle"></search-album>
		</el-tab-pane>
	    <el-tab-pane label="MV" name="five">
			<search-mv :key="timer5" @setData="setDataHandle"></search-mv>
		</el-tab-pane>
	  </el-tabs>
  </div>
</template>

<script>

import SearchSongs from "./childsPage/search-songs.vue"
import SearchArtist from "./childsPage/search-artist.vue"
import SearchPlaylist from "./childsPage/search-playlist.vue"
import SearchAlbum from "./childsPage/search-album.vue"
import SearchMv from "./childsPage/search-mv.vue"
export default {
  name:'SearchDetail',
  components:{SearchSongs,SearchArtist,SearchPlaylist,SearchAlbum,SearchMv},
  data(){
    return{
      keywords:'',
	  count: 0,
	  searchType: "单曲", //搜索类型
	  activeName: 'first',
	  timer1:'',
	  timer2:'',
	  timer3:'',
	  timer4:'',
	  timer5:''
	  
    }
  },
  created(){
  },
  methods:{
    handleClick(tab, event) {
		let name = tab.name
		    if(name == 'first'){
		    this.timer1 = new Date().getTime()
		  }else if(name == 'second'){
		    this.timer2 = new Date().getTime()
		  }else if(name == 'third'){
		    this.timer3 = new Date().getTime()
		  }else if(name == 'fourth'){
		    this.timer4 = new Date().getTime()
		  }else if(name == 'five'){
		    this.timer5 = new Date().getTime()
		  }
    },
	
	setDataHandle(count, type){
		// console.log(count, type);
		this.count = count;
		this.searchType = type;
	},
	
	
  },
  watch: {

    $route: 
	{
      handler() {
        if (this.$route.path.indexOf("/search-detail") >= 0) {
          this.keywords = this.$route.params.keywords;
        }
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
.search-detail {
	padding: 10px 30px 0 30px;
	.font-color{
		color: var(--tag-color);
	}
	.keywords{
		font-size: 20px;
	}
	.count{
		font-size: 16px;
	}
	.count{
		font-size:16px;
	}
}

</style>